<template>
  <view>
    <van-row>
      <van-col span="10" offset="4"
        ><span style="font-size: 30px">{{ title }}</span></van-col
      >
    </van-row>
    <div v-if="editPoint">
      <van-row>
        <van-cell-group inset>
          <van-cell :title="selMapPointName" @click="selMapPoint" />
          <van-cell title="详细地址（选填）">
            <van-field
              v-model="addressDetail"
              type="text"
              @change="addressDetailChange"
              placeholder="详细地址"
            />
          </van-cell>
          <van-cell title="联系人姓名（选填）">
            <van-field
              :value="contactName"
              @change="contactNameChange"
              type="text"
              placeholder="联系人姓名"
            />
          </van-cell>
          <van-cell title="联系电话">
            <van-field
              :value="contactPhone"
              @change="contactPhoneChange"
              type="text"
              required="true"
              placeholder="联系电话"
            />
          </van-cell>
        </van-cell-group>
      </van-row>
      <van-field :value="userAddrId" style="visibility: hidden" />

      <van-button type="default" @click="confirmEdit(userAddrId)" class="bdstk"
        >确认</van-button
      >
      <van-button type="default" @click="cancelEdit" class="bdstk"
        >取消</van-button
      >
    </div>
    <div v-else>
      <van-row
        gutter="20"
        v-bind:key="addr"
        v-for="addr in addressList"
        class="addr-item"
        @click="selAddrItem(addr.addressId)"
      >
        <van-col offset="2" span="16">
          <h1>{{ addr.cityDistrict }}</h1>
          <span style="font-size: larger">{{ addr.addressDetail }}</span>
          <h1>{{ addr.contactName }} - {{ addr.contactPhone }}</h1>
        </van-col>
        <van-col offset="2" span="4">
          <van-button
            type="default"
            @click="editAddr(addr.addressId)"
            icon="edit"
          />
        </van-col>
      </van-row>
    </div>
  </view>
</template>
<script>
import mapUtil from "@/utils/mapLocation.js";
import utils from "@/utils/index.js";
import store from "@/utils/store.js";

export default {
  data() {
    return {
      mapPoint: {
        longitude: Number, //经度
        latitude: Number, //纬度
        city: String,
        dist: String,
        addDetail: String,
      },
      selMapPointName: "点击搜索地址",
      addressDetail: "",
      contactName: "",
      contactPhone: "",
      userAddrId: "",
      editPoint: false,
      addressList: [],
    };
  },
  props: {
    title: String,
  },
  methods: {
    cancelEdit() {
      this.editPoint = false;
    },
    selMapPoint() {
      let _page = this;
      let p = mapUtil.selectMapPoint();
      p.then(function (res) {
        console.log("res", res);
        _page.mapPoint = {
          longitude: res.longitude, //经度
          latitude: res.latitude, //纬度
          dist: res.dist,
          city: res.city,
          addDetail: res.addDetail,
        };
        _page.selMapPointName = res.addDetail;
      }).catch(function (error) {
        console.log("error", error);
      });
    },
    addressDetailChange(evt) {
      this.addressDetail = evt.mp.detail;
    },
    contactNameChange(evt) {
      this.contactName = evt.mp.detail;
    },
    contactPhoneChange(evt) {
      this.contactPhone = evt.mp.detail;
    },
    selAddrItem(addrId) {
      console.log("addrId", addrId);

      this.addressList.forEach((item) => {
        if (item.addressId === addrId) {
          const mPoint = item.point;
          let tarPoint = {
            longitude: mPoint.longitude,
            latitude: mPoint.latitude,
            city: mPoint.city,
            addDetail: item.addressDetail,
            uAddrId: addrId,
          };

          store.commit("setTargetPoint", tarPoint);
        }
      });
    },
    editAddr(addrId) {
      let target;
      this.addressList.forEach((element) => {
        if (element.addressId === addrId) {
          target = element;
        }
      });
      if (target && target.point) {
        this.mapPoint = target.point;
        this.addressDetail = target.addressDetail;
        this.contactName = target.contactName;
        this.contactPhone = target.contactPhone;
        this.userAddrId = target.addressId;
        this.editPoint = true;
      } else {
        console.error("地址信息解析失败", this.addressList, addrId);
      }
    },

    confirmEdit(userAddrId) {
      console.log(
        "----this.mapPoint",
        userAddrId,
        this.contactName,
        this.contactPhone,
        this.addressDetail
      );

      let pointSave = {
        id: this.userAddrId,
        point: this.mapPoint,
        contactName: this.contactName,
        contactPhone: this.contactPhone,
        addressDetail: this.addressDetail,
      };
      let _page = this;
      let p = new Promise((resolve, reject) => {
        _page.$API.post("/transport/address/save", pointSave).then((res) => {
          if (res.code === 20000) {
            //store.commit("setTargetPoint", _page.mapPoint);
            resolve(res.data);
          } else {
            reject(res);
          }
        });
      });
      p.then((res) => {
        this.editPoint = false;
        // wx.navigateBack({
        //   data: 1,
        // });
        this.addressList.forEach((item, index, array) => {
          if (item.addressId === userAddrId) {
            array[index] = res;
          }
        });
      }).catch((error) => {});
    },
  },
  onShow() {
    console.log("onShow");
    let _page = this;
    let p = utils.checkWxLogin();
    p.then(function (res) {
      _page.$API.get("/transport/address/queryByUser").then((res) => {
        _page.addressList = res.data;
        if (res.data.length === 0) {
          _page.editPoint = true;
        }
      });
    }).catch(function (err) {
      console.log("error", err);
      const url = "../../profile/loginOption/index";
      wx.navigateTo({ url });
    });
  },
  onLoad(options) {},
};
</script>
<style scoped>
.bdstk {
  font-size: 30rpx;
  color: #ffffff;
  width: 100%;
  border: 2rpx solid #ffffff;
  border-radius: 15rpx;
  background: #78b8fd;
  height: 95rpx;
  text-align: center;
  line-height: 95rpx;
}

.addr-item {
  width: 90%;
  padding-bottom: 15px;
  margin: 20px 5%;
  display: block;
  border-bottom: 1px solid rgb(211, 211, 211);
}
</style>
